AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~バックエンド編~

どうも！大阪オフィスの西村祐二です。

以前下記のようなブログを書きました。

Angular+Cognitoで作るログインページ– ClassmethodサーバーレスAdvent Calendar 2017 #serverless #adventcalendar

Angular6になったり、いろいろ古くなってきたので、バージョンアップしたもので書き直したいと思います。

• 今回：AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~バックエンド編~
• AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~フロントエンド編①~
• AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~フロントエンド編②~
• AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~UI編~

以前はCogitoの認証のところにamazon-cognito-identity-jsを使っていましたが、現在はAWS-Amplifyに統合されましたので、AWS-Amplifyに合わせる形で書き直しています。

ついでに、API GatewayにもCognitoで認証をかけて、Cognitodでログインしているユーザのみ利用できるようにしています。

書いていたら長くなったので、何回かに分けて投稿していきます。本ブログはAWSのサービスを使ってバックエンドを構築するところまでになります。

ゴール

下記のことができるサイトを作ることがゴールです。

• ログイン、ログアウトができる
• サインアップができる
• ログインした際にログインユーザ名を表示
• API GatewayのAPIをリクエストし、情報取得(Cognito認証)
  • 今回、ペットの情報を取得表示しています

こちらが完成版です。

さっそくやっていきましょう！

Amazon Cognitoでの作業

▼マネージメントコンソールより、Cognito -> 「ユーザープールの管理」-> 「ユーザープールを作成する」を選択します。

▼ユーザープール名を「amplify-test」として作成します。「ユーザープールをどのように作成しますか?」では、「デフォルトを確認する」を選択します。内容を確認して、「プールの作成」をクリックします。

▼「アプリクライアント」->　「アプリクライアントの追加」からアプリクライアントを追加します。今回は「amplify-test-app」としています。「アプリクライアントの作成」をクリックします。

▼設定情報をメモしておきます。Angularで作るクライアント側で必要になります。

Cognitoでの作業は終わりです。

API Gatewayでの作業

サンプルAPIを作成

▼マネージメントコンソールより、API Gateway -> 「APIの作成」-> 「APIの例」を選択します。
APIを作成すると「PetStore」が作成されます。

今回、ペット一覧を取得するGETメソッドに認証をかけたいと思います。

オーサライザーの作成

▼Cognitoを使ってAPIを認証するために、オーサライザーを作成します。

「PetStore」 -> オーサライザー を選択します。
設定は下記画像のように設定します。
名前「amplify-test」、トークンのソース「Authorization」として設定しています。

認証設定

▼「PetStore」 -> 「リソース」 -> /petsのGET を選択します。
メソッドリクエスト -> 認証をクリックし、「amplify-test」を選択します。

デプロイ

▼動作確認
ブラウザからアクセスしてみると、きちんと「Unauthorized」となっていることがわかります。

さいごに

いかがだったでしょうか。

Amazon Cognito、API Gatewayでバックエンド部分を構築しました。

一度さわったことがある方ならすぐできるかと思います。

次はAngularでログインページを作成していきます。